<template>
  <div class="home">
    <div class="nav" style="-webkit-app-region: drag">
      <div class="navLeft">
        <div class="navL-logo">
          DOTA
        </div>
        <div class="navServer" style="-webkit-app-region: no-drag;">
          <input type="text" placeholder="搜索联系人，群组，聊天消息">
        </div>
      </div>
      <div class="navRight" style="-webkit-app-region: no-drag;">
        <div id="goLogin" @click="goLoginClick" style="-webkit-app-region: no-drag;">
          退出登录
        </div>
        <div id="minSize" @click="minSizeClick" style="-webkit-app-region: no-drag;">
          <i class="el-icon-minus"></i>
        </div>
        <div id="maxSize" @click="maxSizeClick" style="-webkit-app-region: no-drag;">
          <i class="el-icon-plus"></i>
        </div>
        <div id="closed" @click="closedClick" style="-webkit-app-region: no-drag;">
          <i class="el-icon-error"></i>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="mainLeft">
        <ul>
          <li v-for="(item,index) in navLists" :class="{'navLi':isNavLi,'navSelectLi':isNavSelectLi == index}" :key="index"
            @click="navClick(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="mainRight">
        <router-view keep-alive></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  if (window.require) {
    var ipcRenderer = window.require("electron").ipcRenderer;
  }
  export default {
    data() {
      return {
        navLists: [{
            name: "first blood",
            path: "firstblood"
          },
          {
            name: "double kill",
            path: "doubleblood"
          },
          {
            name: "triple kill",
            path: "tripleblood"
          },
          {
            name: "ultra kill",
            path: "ultrablood"
          },
          // { name: "rampage kill", path: "rampageblood" },
          // { name: "Killing Spree", path: "KillingSpree" },
          // { name: "Dominating", path: "Dominating" },
          // { name: "MegaKill", path: "MegaKill" },
          // { name: "Unstoppable", path: "Unstoppable" },
          // { name: "Monster Kill", path: "MonsterKill" },
          // { name: "God Like", path: "GodLike" },
          // { name: "Holy Shit", path: "HolyShit" },
          // { name: "WhickedSick", path: "WhickedSick" }
        ],
        isNavLi: true,
        isNavSelectLi: 0
      };
    },
    created: function () {
      var self = this;
    },
    mounted() {
      // 监听主进程返回的消息
      // ipcRenderer.on('minSizeClickCallBack', function (event, arg) {
      //   console.log(arg);
      // });
    },
    filters: {},
    methods: {
      minSizeClick() {
        ipcRenderer.send("minSizeClick");
      },
      maxSizeClick() {
        ipcRenderer.send("maxSizeClick");
      },
      closedClick() {
        ipcRenderer.send("closedClick");
      },
      goLoginClick() {
        ipcRenderer.send("GoLOGIN");
        this.$router.push({
          path: "/login"
        });
      },
      navClick(index) {
        var pathStr = this.navLists[index].path;
        this.$router.push({
          path: "/home/" + pathStr
        });
        this.isNavSelectLi = index;
      }
    },
    watch: {}
  };

</script>

<style scoped>
  .home {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    overflow: hidden;

  }

  .nav {
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }

  .navLeft {
    display: flex;
    align-items: center;
  }

  .navL-logo {
    font-size: 18px;
    color: #000;
    font-weight: 700;
    /* margin-left: 15px; */
    width: 195px;
    text-align: center;
  }

  .navServer {
    /* margin-left: 15px; */
  }

  .navServer input {
    border: 1px solid #ccc;
    height: 28px;
    width: 250px;
    border-radius: 4px;
    padding-left: 10px;
    font-size: 16px;
    color: #000;
  }

  .navRight {
    display: flex;
    align-items: center;
  }

  .navRight div {
    width: 70px;
    height: 50px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
  }

  .navRight div:hover {
    background-color: #ccc;
  }

  .main {
    height: calc(100% - 50px);
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .mainLeft {
    width: 195px;
    height: 100%;
  }

  .navLi {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    color: #333;
    cursor: pointer;
  }

  .navSelectLi {
    background-color: rgb(94, 86, 86);
    color: #fff;
  }

  .mainRight {
    width: calc(100% - 195px);
    height: 100%;
    background-color: rgb(228, 215, 215);
  }

</style>
